<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
        <link rel="stylesheet" type="text/css" href="../../../css/style.css">
		<!--标准mui.css-->
		<link rel="stylesheet" href="../../../css/mui.min.css">
		<style>
			.mui-table-view-cell:after{
				display: none;
			}
			.noticedate{
				text-align: center;
				position: relative;
				margin-top:10px ;
				background: #fff;
			}
			.date{
				text-align: center;
				color: #282828;
				margin: 20px 0;
			}
			.datetime{
				color: #7b7b7b;
				font-size: 14px;
			}
			.noticedate span img{
				width: 0.4rem; 
			}
			.noticeleft{
				position: absolute;
				left: 1.3rem;
				top: 0.02rem;
			}
			.noticeright{
				position: absolute;
				right:1.3rem;
				top:0.02rem ;
			}
			ul.timeline {
		        list-style-type: none;
		        background: url("../../../images/version_line.jpg") repeat-y scroll 18px 0 transparent;
		    	padding: 0;
		    	background-size: 2px;
         	}
	       ul.timeline li {
	          position: relative;
	           margin-bottom: 20px;
	       }
	      ul.timeline li .time {
		       color: #fff;
		       text-align: center;
		       background: url("../../../images/datetime.png") no-repeat 0 transparent;
		       margin-left: 48px;
		       background-size: 55px;
		       width: 65px;
		       margin-bottom: 20px;
		       height: 23px;
		       line-height: 24px;
		       font-size: 14px;
	       }
        ul.timeline li .version {
           position: absolute;
           width: 290px;
          text-align: right;
           left: -200px;
           top: 30px;
            font-size: 40px;
            line-height: 50px;
           color: #3594cb;
           overflow: hidden;
        }
       ul.timeline li .number {
           position: absolute;
           background: url("../../../images/listbg.jpg") no-repeat scroll 0 0 transparent;
           width: 20px;
           height: 20px;
           top: 0px;
           left: 10px;
           line-height: 56px;
           text-align: center;
           color: #fff;
           font-size: 18px;
           background-size: 20px;
      }
        ul.timeline li.alt .number {
            background-image: url("../../../images/listbg.png");
       }
       ul.timeline li .dian{
            background: url("../../../images/listdian.png") no-repeat;
            background-size: 10px;
            width: 10px;
            height: 10px;
            display: block;
            float: left;
            margin-top: 30px;
       }
        ul.timeline li .content {
         	margin-left: 14px; 
         	background:url("../../../images/jiantou.png") 24px center no-repeat;
        }
       ul.timeline li .content .contentBox {
         	background: #fff;
         	margin-left: 33px;
         	margin-bottom: 10px;
            padding:10px 0 10px 10px
       }
        .notice-main ul li{
        	background: none;
        	padding: 0;
        }
        ul.timeline li .content .contentBox .title{
        	padding-bottom: 10px;
        }
        ul.timeline li .content .contentBox .author{
        	color: #7b7b7b; 
        }
		</style>
	</head>

	<body>
		<div id="list"> 
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper list-frame" style="background: #fff!important;">
			<div class="mui-scroll">
			<div class="noticedate">
				<span class="noticeleft" @tap="timechange(1)"><img src="../../../images/noticeleft_03.png" /></span>
				<div class="date">
				
					<div class="datetime" id="datetime"></div>
				</div>
				<span class="noticeright" @tap="timechange(2)"><img src="../../../images/noticeright_03.png" /></span>
			</div>
			<div class="notice-main mmt20">
				<ul class="timeline">
				    <li v-for="item in items" @tap="open_detail(item)">
				        <div class="time">{{item.time}}</div>
						<div class="version"></div>
						<div class="number"></div>
						<div class="content">
							<span class="dian"></span>
						 	<div class="contentBox">
						   		<div class="title">{{item.title}}</div>
						   		<div class="author">{{item.institution_name}}</div>
						   	</div>
						</div>
				    </li>
   				 </ul>
			</div>
			</div>
		</div>
		</div>
		
	</body>
	<script src="../../../js/mui.js"></script>
	<script src="../../../js/vue.min.js"></script>
	<script src="../../../js/app.js"></script>
	<script src="../../../js/token.js"></script>
	<script>
		var pages = 1
		var state = app.getState();
		var memberToken = state.memberToken;
		var childid = state.childid;
		var noticetype = 3;
		var agotime='';
		var tt=new Date().getTime(); 
		var back=new Date(tt + 24*60*60*1000); 
		var nowdate=new Date(tt)
		var nowyear=nowdate.getFullYear();
		var nowmonth=nowdate.getMonth()+1; 
		var nowdate=nowdate.getDate()
		if(nowmonth<10){
				nowmonth='0'+nowmonth
			}
		if(nowdate<10){
			nowdate='0'+nowdate
		}
		var nowtime=nowyear+'年'+nowmonth+'月'+nowdate+'日';
		var nowtimea=nowyear+'-'+nowmonth+'-'+nowdate;
		mui.init({
			pullRefresh: {
				container: '#pullrefresh',
				down: {
					auto:true,
					callback: function() {
						pages = 1
						pulldownRefresh(pages)
					}
				},
				up: {
					contentrefresh: '正在加载...',
					callback: function() {
						pages++;
						pullupRefresh(pages)
					}
				}
			}

		});
		mui.plusReady(function() {
			document.getElementById('datetime').innerHTML=nowtime;
			var data = {
				uid: state.userid,
				type: noticetype,
				memberToken: memberToken,
				page:1,
				child_id:childid
			};
			mui.post(Apiurl+'index/notice_new', data, function(data) {
				//alert(JSON.stringify(data))
				if(data.list && data.list.length > 0) {
					
					pullrefresh.items = data.list;
				}
				mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
			}, 'json');
				
		});
		//下拉刷新
		function pulldownRefresh(pages) {
			if(window.plus && plus.networkinfo.getCurrentType() === plus.networkinfo.CONNECTION_NONE) {
				plus.nativeUI.toast('似乎已断开与互联网的连接', {
					verticalAlign: 'top'
				});
				return;
			}
			var data = {
				uid: state.userid,
				type: noticetype,
				memberToken: memberToken,
				time:agotime,
				child_id:childid
			};
			data.page=pages;
			
			mui.post(Apiurl+'index/notice_new', data, function(data) {
				
				if(data.list && data.list.length > 0) {
					
					pullrefresh.items = data.list;
				}
				mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
			}, 'json');
		}
		//上拉加载
		function pullupRefresh(pages) {
			if(window.plus && plus.networkinfo.getCurrentType() === plus.networkinfo.CONNECTION_NONE) {
				plus.nativeUI.toast('似乎已断开与互联网的连接', {
					verticalAlign: 'top'
				});
				return;
			}
			var data = {
				uid: state.userid,
				type: noticetype,
				memberToken: memberToken,
				child_id:childid
			};
			data.page=pages
			//请求历史列表信息流
			mui.post(Apiurl+'index/notice_new', data, function(data) {
				
				if(data.list && data.list.length > 0) {
					
					pullrefresh.items = pullrefresh.items.concat(data.list);
				}
				mui('#pullrefresh').pullRefresh().endPullupToRefresh()
			}, 'json');
			
		}
		var pullrefresh = new Vue({
			el: '#pullrefresh',
			data: {
				items: [] //列表信息流数据
			},
			methods: {
				timechange: function(aspect){
						if(aspect==1){
							var ago=new Date(tt - 24*60*60*1000);  
							agob=tt - 24*60*60*1000;
						}else if(aspect==2){ 
							var ago=new Date(tt + 24*60*60*1000);  
							agob=tt + 24*60*60*1000;
						}
						var agoyear=ago.getFullYear();
						var agomonth=ago.getMonth()+1;
						var agodate=ago.getDate();
						if(agomonth<10){
							agomonth='0'+agomonth
						}
						if(agodate<10){
							agodate='0'+agodate
						}
						agotime=agoyear+'-'+agomonth+'-'+agodate;
						var agotimetop=agoyear+'年'+agomonth+'月'+agodate+'日';
						tt=agob;
						document.getElementById('datetime').innerHTML=agotimetop; 
						var data = {
							uid: state.userid,
							type:'2',
							time:agotime,
							memberToken: memberToken,
							page:1,
							child_id:childid
						};
						mui.post(Apiurl+'index/notice_new', data, function(data) {
							if(data.status==201){
								pullrefresh.items=""
							}else{
								
								pullrefresh.items = data.list; 
							}
							
							
						}, 'json');
					},
				open_detail: function(item) {
					mui.openWindow({
						url: 'notice_detail.html',
						id: 'noticedetail',
						styles: {
							"render": "always",
							"popGesture": "hide",
							"bounce": "vertical",
							"bounceBackground": "#efeff4",
							"titleNView": titleNView = { //详情页原生导航配置
								autoBackButton: true, //自动绘制返回箭头
								backgroundColor: '#25aae3', //导航栏背景色
								titleText: "详细信息", //导航栏标题
								titleColor: '#F7F7F7', //文字颜色
								//coverage:"120px",
								//type: 'transparent', //透明渐变样式
								splitLine: { //底部分割线
									color: '#cccccc'
								}
							}
						},
						extras: {
							noticeid: item.id,
							userid: state.userid
						}
					});
				}
			}
		});
		//切换孩子
		window.addEventListener('changeChild', function(event) {
			childid = event.detail.changeChild;
			var data = {
							uid: state.userid,
							type:'2',
							time:agotime,
							memberToken: memberToken,
							page:1,
							child_id:childid
						};
			mui.post(Apiurl+'index/notice_new', data, function(data) {
				//alert(JSON.stringify(data))
				if(data.list && data.list.length > 0) {
					 
					pullrefresh.items = data.list;
				}
				mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
			}, 'json');
		});
	</script>

</html>